<template>
	<div class="userList">
		<div class="allList1" v-if='type==1'>
			<div class="listItem" v-for='item in userLists'>
				<div class="listMess" @click='goGroupDetail(item.GROUPON_USER_ID)'>
					<div class="listLeft">
						<img :src="item.SPICT_USERS_PATH" alt="" />
						<div class="detailMess">
							<h1>{{item.USER_NAME |fiterPhone}}<span>开团</span></h1>
							<p v-if='item.downObj'>剩余<span>{{item.downObj.H}}:{{item.downObj.M}}:{{item.downObj.S}}</span>结束</p>
						</div>
					</div>
					<div class="listRight">仅差<span>{{item.PEOPLE_NUM}}</span>人</div>
				</div>
				<div class="listBtn" @click='goPay1(item.GROUPON_USER_ID)'>
					去凑团
				</div>
			</div>
		</div>
		<div class="allList2" v-if='type==2'>
			<div class="listItem" v-for='item in userLists'>
				<div class="listMess" @click='goGroupDetail(item.GROUPON_USER_ID)'>
					<div class="listLeft">
						<img :src="item.SPICT_USERS_PATH" alt="" />
						<div class="detailMess">
							<h1>{{item.USER_NAME |fiterPhone}}<span>开团</span></h1>
							<div class="listType" v-if='item.downObj'>剩余<span>{{item.downObj.H}}:{{item.downObj.M}}:{{item.downObj.S}}</span>结束
								<div class="listRight">仅差<span>{{item.PEOPLE_NUM}}</span>人</div>
							</div>
						</div>
					</div>
					
				</div>
				<div class="listBtn" @click='goPay2(item.GROUPON_USER_ID)'>
					去凑团
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: "userList",
	// 数据
	data() {

		return {
			userId: '',
			page:1
		}
	},
	// 计算属性
	computed: {
		userLists(){
			return this.userList;
		}
	},
	props:['userList','type'],
	// 创建（实例创建完成）
	created() {
		setInterval(()=>{
			this.checkAllUserList();
		},500)
	},
	// el被创建，并挂载到实例上
	mounted() {
		
	},
	// 方法（实例中的方法）-----------
	methods: {
		checkAllUserList(){
			for(let i=0;i<this.userLists.length;i++){
		        var times=new Date().getTime();
		        let H=0;
		        let M=0;
		        let S=0;
		        if(times>=this.userLists[i].END_DATE){
		          this.userLists.splice(i,1);
		        }else{
		          H=parseInt((this.userLists[i].END_DATE-times)/(60*60*1000));
		          M=parseInt((this.userLists[i].END_DATE-times-H*60*60*1000)/(60*1000));
		          S=parseInt((this.userLists[i].END_DATE-times-H*60*60*1000-M*60*1000)/(1000));
		          H=this.filterNum(H);
		          M=this.filterNum(M);
		          S=this.filterNum(S);
		        }
		        this.$set(this.userLists[i],'downObj',{H:H,M:M,S:S});
		    }
		},
		filterNum(num){
	      return num>=10?num:'0'+num
	    },
	    //去凑团类型1
	    goPay1(id){
	    	sessionStorage.setItem('cGroup',1);
	    	this.$emit('group-pay',id);
	    },
	    //去凑团类型2
	    goPay2(id){
	    	sessionStorage.setItem('cGroup',1);//代表参团
	    	this.$router.push('/groupDetail/'+id);
	    },
	    goGroupDetail(id){
	    	this.$router.push('/groupDetail/'+id);
	    }
	},
	// 子组件
	components: {
	}
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../assets/css/public.less');
.userList {
	margin-top: -0.2rem;
	.allList1{
		padding: 0.4rem 0 0.1rem;
		.listItem{
			width: 7.1rem;
			height: 0.88rem;
			margin: 0 auto 0.3rem;
			background: url(../assets/image/group/userListBg.png) no-repeat;
			background-size: 7.1rem 0.88rem;
			display: flex;
			padding: 0 0.03rem;
			justify-content:space-between;
			align-items:center;
			.listMess{
				display: flex;
				width: 5.5rem;
				justify-content:space-between;
				align-items:center;
				.listLeft{
					display: flex;
					align-items:center;
					img{
						width: 0.82rem;
						height: 0.82rem;
						border-radius: 0.41rem;
					}
					.detailMess{
						padding-left: 0.2rem;
						text-align: left;
						h1{
							font-size: 0.24rem;
							height: 0.37rem;
							span{
								padding-left: 0.05rem;
								font-size: 0.2rem;
								color: #999;
							}
						}
						p{
							font-size: 0.2rem;
							color: #666;
							span{
								color: #ec2121;
								padding: 0 0.05rem;
							}
						}
					}
				} 
				.listRight{
					font-size: 0.24rem;
					span{
						color: #ec2121;
					}
				}
			}
			.listBtn{
				font-size: 0.28rem;
				width: 1.5rem;
				text-align: center;
				color: #fff;

			}
		}
	}
	.allList2{
		padding: 0rem 0 0.1rem;
		.listItem{
			width: 7.1rem;
			margin: 0 auto 0rem;
			background:#fff;
			display: flex;
			padding: 0.37rem 0rem 0.26rem 0rem;
			justify-content:space-between;
			align-items:center;
			.borderBFu(#ddd);
			.listMess{
				display: flex;
				width: 5rem;
				justify-content:space-between;
				align-items:center;
				.listLeft{
					display: flex;
					align-items:center;
					img{
						width: 0.82rem;
						height: 0.82rem;
						border-radius: 0.41rem;
						.borderFu(#ddd,0.82rem);
					}
					.detailMess{
						padding-left: 0.2rem;
						text-align: left;
						h1{
							font-size: 0.26rem;
							height: 0.37rem;
							font-weight: bold;
							span{
								padding-left: 0.16rem;
								font-size: 0.2rem;
								color: #999;
								font-weight: normal;
							}
						}
						.listType{
							display:flex;
							font-size: 0.22rem;
							color: #666;
							span{
								color: #ec2121;
								padding: 0 0.05rem;
							}
							.listRight{
								font-size: 0.24rem;
								padding-left: 0.25rem;
								span{
									color: #ec2121;
								}
							}
						}
					}
				} 
			}
			.listBtn{
				font-size: 0.28rem;
				width: 1.4rem;
				text-align: center;
				color: #ec2121;
				height: 0.6rem;
				line-height: 0.65rem;
				.borderFu(#ec2121,0.6rem);
				border-radius: 0.3rem;
			}
		}
	}
}
</style>